<template>
  <div class="footer-container">
    <!-- <div class="item"
      :class="{
        'item-active': activeType === 'template'
      }"
      @click="handleSelectionType('template')">
      <img class="item-icon" src="@/assets/images/bottom_background.png" alt="">
      <span class="item-label">模板</span>
    </div> -->
    <div class="item"
      :class="{
        'item-active': activeType === 'background'
      }">
      <van-uploader
        name="file"
        :preview-image="false"
        :after-read="h5UploadBackgroundImage">
        <img class="item-icon" src="@/assets/images/bottom_background.png" alt="">
        <span class="item-label">底图</span>
      </van-uploader>
    </div>
    <div v-if="origin === 'h5'" class="item">
      <van-uploader
        name="file"
        :preview-image="false"
        :before-read="h5UploadImageBeforeRead"
        :after-read="h5UploadImage"
        @click-upload="handleSelectionType('image')">
        <img class="item-icon" src="@/assets/images/ic_edit_bottom_image.png" alt="">
        <span class="item-label">图片</span>
      </van-uploader>
    </div>
    <div v-if="origin === 'toutiao'" @click="toutiaoUploadImage" class="item">
      <img class="item-icon" src="@/assets/images/ic_edit_bottom_image.png" alt="">
      <span class="item-label">图片</span>
    </div>
    <div class="item" :class="{
      'item-active': activeType === 'paster'
    }" @click="handleSelectionType('paster')">
      <img class="item-icon" src="@/assets/images/ic_edit_bottom_stickers.png" alt="">
      <span class="item-label">贴纸</span>
    </div>
    <div class="item" :class="{
      'item-active': activeType === 'text'
    }" @click="handleSelectionType('text')">
      <img class="item-icon" src="@/assets/images/ic_edit_bottom_fonts.png" alt="">
      <span class="item-label">文字</span>
    </div>
    <!-- <div class="item">
      <img class="item-icon" src="@/assets/images/ic_edit_matting.png" alt="">
      <span class="item-label">抠图</span>
    </div> -->
    
    <!-- 底图 -->
    
    <!-- 底图 -->

    <!-- 背景 -->
    <Background @onClose="onClose" />
    <!-- 背景 -->

    <!-- 贴纸 -->
    <Paster @onClose="onClose" />
    <!-- 贴纸 -->

    <!-- 画笔 -->
    <TextBox @onClose="onClose" />
    <!-- 画笔 -->

    <!-- 画笔 -->
    <SliderOpacity @onClose="onClose" />
    <!-- 画笔 -->
  </div>
</template>

<script>
import Background from './Background'; // 选择背景
import Paster from './Paster'; // 选择贴纸
import TextBox from './Text'; // 文本
import SliderOpacity from './SliderOpacity'; // 滑动选择透明度
import config from '@/utils/config';
export default {
  components: {
    Background,
    Paster,
    TextBox,
    SliderOpacity,
    origin: ''
  },
  data() {
    return {
      activeType: '',
      uploadFileUrl: config.baseApi + '/common/upload/templateImage'
    }
  },
  watch: {
    '$store.state.design.currentSelectionType': {
      immediate: true,
      handler(val, oldVal) {
        this.activeType = val;
      }
    }
  },
  created() {
    this.origin = this.$store.state.user.origin;
  },
  methods: {

    // h5上传底图图片
    h5UploadBackgroundImage(files) {
      this.handAccountCanvas.h5Upload(files).then(result => {
        let image = result.cover_path;
        this.handAccountCanvas.setCanvasBackground({
          type: 'img',
          uri: image,
        });
      });
    },

    // h5添加图片ICON
    h5UploadImage(files) {
      this.handAccountCanvas.h5Upload(files).then(result => {
        console.log(result)
        let image = result.cover_path;
        this.handAccountCanvas.addImage({
          options: {
            elType: 'image-icon'
          },
          uri: image
        })
      });
    },

    // 上传前检查
    h5UploadImageBeforeRead() {
      let handAccountCanvas = this.handAccountCanvas.getObject();
      if (handAccountCanvas && handAccountCanvas.backgroundColor) {
        this.$toast({
          message: '请先上传底图',
          position: 'center',
        });
        return false;
      }
      return true;
    },

    // 头条小程序上传图片
    toutiaoUploadImage() {

      // 判断是否有底图
      // let handAccountCanvas = this.handAccountCanvas.getObject();

      this.handAccountCanvas.toutiaoUpload().then(result => {
        let image = result.cover_path;
        this.handAccountCanvas.addImage({
          options: {
            elType: 'image-icon'
          },
          uri: image
        })
      });
    },

    // 点击选择操作模块类型
    async handleSelectionType(type) {
      let handAccountCanvas = this.handAccountCanvas.getObject();
      if (handAccountCanvas && handAccountCanvas.backgroundColor) {
        this.$toast({
          message: '请先上传底图',
          position: 'center',
        });
        return false;
      }
      if (this.activeType !== type) {
        await this.$store.dispatch('design/setCurrentSelectionType', '');
        await this.$store.dispatch('design/setCurrentSelectionType', type);
      } else {
        await this.$store.dispatch('design/setCurrentSelectionType', '');
      }
    },

    // 关闭弹窗
    onClose(closeType) {
      this.activeType = '';
    }
  }
}
</script>

<style lang="less" scoped>
.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 99999;

  .item {
    text-align: center;
    padding: 6px 10px;
    border-radius: 4px;
  }

  .item-active {
    background: #8da6ef;
  }

  .item-icon {
    width: 20px;
    height: 20px;
    border: 0;
    margin: 0;
    display: block;
    margin: auto;
  }

  .item-label {
    font-size: 12px;
    color: #fff;
  }
}
</style>
